
@import "variables";


$btn-normal-bg:         #fafafa;
$btn-normal-border:     #e3e3e3;
$btn-normal-hover-bg:   #f0f0f0;

$btn-primary-bg:        #00aaf1;
$btn-primary-color:     #fff;
$btn-primary-hover-bg:  #43c0f4;
$btn-primary-active-bg: #00a9f0;

$btn-text-bg:         #fdfdfd;
$btn-text-border:     #e3e3e3;
$btn-text-hover-bg:   #f7f7f7;
$btn-text-active-bg:  #ededed;

$btn-text-primary-color:  #0097d7;

$btn-disabled-bg:     #ddd;
$btn-disabled-color:  #fff;

$btn-height-base:   24px;
$btn-height-large:  30px;
$btn-height-small:  20px;

$btn-width-base:    64px;
$btn-width-large:   100px;


// 按钮基本样式
button {
  border-radius: 2px;
  box-sizing: border-box;
  cursor: pointer;
  font-family: $font-family;
  outline: none;
  padding-bottom: 0;
  padding-top: 0;
  @extend %btn-base;
  @extend %btn-normal;

  &:disabled {
    background: $btn-disabled-bg !important;
    border: 0;
    color: $btn-disabled-color !important;
    cursor: not-allowed;
  }
}


/**
 * 按颜色区分
 */

// 普通按钮
// e.g. 取消
%btn-normal {
  background: $btn-normal-bg;
  color: $color-text-light;
  border: 1px solid $btn-normal-border;

  &:hover {
    background: $btn-normal-hover-bg;
  }

  &:active {
    background: $btn-normal-border;
  }
}

// 高亮按钮
// e.g. 确定
%btn-primary {
  background: $btn-primary-bg;
  border: 0;
  color: $btn-primary-color;

  &:hover {
    background: $btn-primary-hover-bg;
  }

  &:active {
    background: $btn-primary-active-bg;
  }
}

// 纯包裹文字的按钮
// e.g. 关怀
%btn-text {
  background: $btn-text-bg;
  color: $color-text-light;
  border: 1px solid $btn-text-border;

  &:hover {
    background: $btn-text-hover-bg;
  }

  &:active {
    background: $btn-text-active-bg;
  }
}

// 高亮色的文字按钮
// e.g. 新建
%btn-text-primary {
  @extend %btn-text;
  color: $btn-text-primary-color;
}


/**
 * 按大小区分
 */

// 基本小按钮 (64px+)
%btn-base {
  font-size: $font-size-base;
  height: $btn-height-base;
  min-width: $btn-width-base;
  padding-left: 0.75em;
  padding-right: 0.75em;
}

// 基本大按钮 (100px+)
%btn-large {
  font-size: $font-size-large;
  height: $btn-height-large;
  min-width: $btn-width-large;
  padding-left: 1em;
  padding-right: 1em;
}

// 小按钮
%btn-small {
  font-size: $font-size-base;
  height: $btn-height-small;
  padding-left: 0.75em;
  padding-right: 0.75em;
}

// 自由宽度按钮
%btn-auto-width {
  min-width: 0;
}


/**
 * 组装好的按钮
 */

// 确定
.btn-ok {
  @extend %btn-primary;
  @extend %btn-large;
}
.btn-ok-normal {
	@extend %btn-primary;
  @extend %btn-base;
}
.btn-ok-small {
	@extend %btn-primary;
	@extend %btn-small;
}

// 取消
.btn-cancel {
  @extend %btn-normal;
  @extend %btn-large;
}
.btn-cancel-normal {
	@extend %btn-normal;
  @extend %btn-base;
}
.btn-cancel-small {
	@extend %btn-normal;
	@extend %btn-small;
}


// 功能按钮 (普通)
.btn-function-normal {
  @extend %btn-large;
  @extend %btn-auto-width;
  @extend %btn-normal;
}

// 功能按钮 (高亮)
.btn-function-highlight {
  @extend %btn-large;
  @extend %btn-auto-width;
  @extend %btn-primary;
}

// 开关
.btn-option{
  width: 65px;
  height: 30px;
  background-color: $btn-primary-bg;
  color: #ffffff;
  border-radius: 15px;
  position: relative;
  .bo-text{
    line-height: 30px;
    position: absolute;
    left: 12px;
  }
  .bo-btn{
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background-color: #fff;
    right: 2px;
    top: 2px;
    cursor: pointer;
  }
}

.btn-option-close{
  @extend .btn-option;
  background-color: $btn-disabled-bg;
  .bo-text{
    right: 12px;
    text-align: right;
  }
  .bo-btn{
    left: 2px;
  }
}
